<!DOCTYPE html>
<html>
<head>
	<script src="../jQuery/jquery1.7.1.js" >
    </script>
    <script src="jchartlib/chartUtil.js" >
    </script>
    <script src="jchartlib/js/jchartfx.system.js">
    </script>
    <script src="jchartlib/js/jchartfx.coreVector.js">
    </script>
    <script src="jchartlib/js/jchartfx.coreVector3D.js">
    </script>
    <script src="jchartlib/js/jchartfx.advanced.js">
    </script>
    <script src="jchartlib/js/jchartfx.gauge.js">
    </script>
     <script>
        function initialize() { 
            testJson();
            initChart("divChart1", "This is Jerry chart1", getData1());
            initChart("divChart2", "This is Jerry chart2", getData2());
        }
 
    function testJson(){
        var a = { "data":
        {
            "item": [
            {
                "OCCURANCE":38609,"ITEM_NUMBER":"Item number:1 "
            },
            { "OCCURANCE":7002,"ITEM_NUMBER":"Item number:2" },
            { "OCCURANCE":2986,"ITEM_NUMBER":"Item number:3 "} ], 

            "sale": [], 
            "service": []
        }};

        var b = {"data": {"item": [{"OCCURANCE":38609,"ITEM_NUMBER":"Item number:1 "},{"OCCURANCE":7002,"ITEM_NUMBER":"Item number:2 "},{"OCCURANCE":2986,"ITEM_NUMBER":"Item number:3 "}], "sale": [], "service": []}};
        debugger;
    }
    function getData1() {
        var items = [{
            "Number": 100,
            "Order": "Order with 30 items"
        }, 
        {
            "Number": 80,
            "Order": "Order with 29 items"
        }, 
        {
            "Number": 50,
            "Order": "Order with 28 items"
        }, 
        {
            "Number": 49,
            "Order": "Order with 27 items"
        },  
        {
            "Number": 30,
            "Order": "Order with 26 items"
        }];
        return items;
    }

    function getData2(){
        return [{"ITEM_NUMBER":4,"OCCURANCE":1},{"ITEM_NUMBER":2,"OCCURANCE":1},{"ITEM_NUMBER":1,"OCCURANCE":94}];
    }
    </script>
         <link rel="stylesheet" type="text/css" href="jchartlib/styles/Attributes/jchartfx.attributes.aurora.css" />
    <link rel="stylesheet" type="text/css" href="jchartlib/styles/Palettes/jchartfx.palette.aurora.css" />

     <style type="text/css">
        .jchartfx .AxisY_Text {
            fill: #FEFEFE;
    }

    .jchartfx .AxisX_Text {
        fill: #FEFEFE;
    }

    .jchartfx .Title {
        fill: #FEFEFE;
    }

    .jchartfx .LegendItem {
        fill: #FEFEFE;
    }
    </style>
}
</head>
<body class="jchartfx_body">
	<div class="jchartfx_container">
    <div id="divChart1" style="width:90%;height:270px;display:inline-block;position:absolute;left:0px;top:0px"></div>

    <div id="divChart2" style="width:90%;height:270px;display:inline-block;position:absolute;left:0px;top:280px"></div>

    <script language="javascript">
        $(document).ready(function ($) {
            initialize();
        });
    </script>
    </div>
</div>
</body>
</html>
